<template>
        <el-dialog
          :title="dialogTitle"
          :visible.sync="RoleDialogVisible"
          :top='setTop'
          >
    
    
            <div class='dialog-body'>
              <el-checkbox-group v-model="checkList" class='checkbox-group' @change='handleChecked'>
                <div v-for='k in res.list'>
                    <el-checkbox :label='k.name'></el-checkbox>
                </div>
              </el-checkbox-group>
            </div>
    
    
            <span slot="footer" class="dialog-footer">
    
    
                <el-button type="primary" @click="save">保存</el-button>


                <el-button @click="changeVisible">取消</el-button>
    

            </span>
    
        </el-dialog>
</template>

<script>
import Vue from 'vue'
import { Checkbox, CheckboxGroup, Button, Dialog } from 'element-ui'
Vue.use(Checkbox)
Vue.use(CheckboxGroup)
Vue.use(Button)
Vue.use(Dialog)
import URL from '@/common/js/adminUrl'

export default {
	mounted () {
		Bus.$on('角色授权', data => { this.RoleDialogVisible = data.role; this.type = 1 })
		Bus.$on('数据授权', data => { this.RoleDialogVisible = data.role; this.type = 2 })
		Bus.$on('dialogTitle', data => (this.dialogTitle = data))
		Bus.$on('userId', data => (this.userId = data))
	},

	watch: {
		RoleDialogVisible (newValue, oldValue) {
			if (newValue && !oldValue) {
				this.Axios
					.Post(URL.role.url + '?userId=' + this.userId + '&type=' + this.type, {})
					.then(res => {
						this.res = res.data.datas
						this.checkList = []
						this.res.list.forEach((ele, i) => {
							if (this.res.list[i].status == 1) {
								this.checkList[i] = this.res.list[i].name
							}
						})
					})
			}
		}
	},

	data () {
		return {
			RoleDialogVisible: false,
			res: '',
			checkList: [],
			checkListId: [],
			checkedFlag: false,
			userId: '',
			type: null,
			dialogTitle: ''
		}
	},

	computed: {
		setTop () {
			return this.res.list && this.res.list.length > 10 ? '4vh' : '18vh'
		}
	},

	methods: {
		save () {


			if (!this.checkedFlag) {

				this.checkListId = []

				for (let i = 0; i < this.checkList.length; i++) {
					for (let k = 0; k < this.res.list.length; k++) {
						if (this.checkList[i] == this.res.list[k].name) {
							this.checkListId.push(this.res.list[k].id)
						}
					}
				}

				let params = {
					userId: this.userId,
					roleIds: this.checkListId,
					type: this.type
				}
				this.Axios.Post(URL.saveRoleAuth.url, params).then(res => {

					res.data.message == '保存成功' ? Bus.$emit('roleSave', '保存成功') : this.cancel()

				})
			}

			this.changeVisible()
		},
		handleChecked (checkList) {
			// 判断用户有没有修改打钩的状况 如果没有  不发送请求
			let arr = []
			this.res.list.forEach((ele, i) => {
				if (this.res.list[i].status == 1) {
					arr.push(this.res.list[i].name)
				}
			}, this)

			this.checkedFlag = arr.sort().toString() == checkList.sort().toString()
		},

		changeVisible () {
			Bus.$emit('roleSave', '')
			this.RoleDialogVisible = false
			//    Bus.$emit('角色授权',this.RoleDialogVisible)
		},

		cancel () {
			Bus.$emit('roleSave', '')
		}
	}
}
</script>

<style scoped>
.checkbox-group div {
  margin-bottom: 15px;
  margin-left: 30px;
}
.dialog-body {
  max-height: 400px;
  overflow: auto;
}
</style>